<template>
	<div class="pic-upload-module">
		<div class="img">
			<img v-if="!imgUrl" :src="noImgUrl"/>
			<img v-else :src="imgUrl" ref="img" @load="handleCanvas" class="img_canvas"/>
			<canvas ref="canvas" class="canvas" :class="{hide: canvasHide}"></canvas>
		</div>
		<div class="upload" v-if="action.indexOf('upload') > -1">
			<el-upload
				class="avatar-uploader"
				action="/saveImageFile"
				:show-file-list="false"
				:on-success="handlePicSuccess"
				:on-error="handlePicError"
				:before-upload="beforePicUpload">
				<i class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</div>
<!--		<el-dialog :visible.sync="picDialog.visible">-->
<!--			<img :src="imgUrl"/>-->
<!--		</el-dialog>-->
	</div>
</template>

<script>
	export default {
		name: "picUpload",
		data() {
			return {
				noImgUrl: "",
				imgUrl: "",
				fileUploadUrl: "",
				picDialog: {
					visible: false
				},
				positionArr: [],
				canvasHide: true
			}
		},
		props: {
			action: {
				type: Array,
				default() {
					return [];
				}
			},
			picInfo: {
				type: Object,
				default() {
					return {
						url: "",
						iconPosition: []
					}
				}
			}
		},
		watch: {
			picInfo: {
				handler(val) {
					let obj = Object.assign({}, val);
					this.imgUrl = obj.url;
					this.canvasHide = true;
					this.positionArr = [].concat(val.iconPosition);
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			this.fileUploadUrl = window.fileLoadUrl;
			this.handleNoImg();
		},
		mounted() {
		},
		methods: {
			handleNoImg() {
				let img = new Image();
				img.src = this.$noImgUrl;
				let that = this;
				img.onload = function () {
					that.$compressImg(this, "", 300, 500).then(url => {
						that.noImgUrl = url;
					});
				}
			},
			// 上传成功
			handlePicSuccess(res) {
				if (res) {
					this.imgUrl = res.svcCont.data;
					this.$emit("imgUrl", this.imgUrl);
					this.positionArr = [];
					this.canvasHide = true;
				}
			},
			// 上传失败
			handlePicError() {
				this.$message.error("上传失败");
			},
			// 上传前
			beforePicUpload(file) {
				let {size} = file;
				if (size > 1048576) {
					this.$message.error("图片大小不能超过1024kb");
					return false;
				}
				return true;
			},
			// 图片处理
			handleCanvas(e) {
				let img1 = e.target;
				let img = new Image();
				img.src = this.imgUrl + '?v=' + Math.random();
				// img.setAttribute('crossOrigin', 'anonymous');
				let canvas = this.$refs.canvas;
				let ctx = canvas.getContext("2d");
				let that = this;
				img.onload = function () {
					canvas.width = img.width;
					canvas.height = img.height;
					canvas.style.width = img1.width + "px";
					canvas.style.height = img1.height + "px";
					// ctx.drawImage(img, 0, 0);
					ctx.fillStyle = 'rgba(255, 255, 255, 0)';
					ctx.strokeStyle = "red";
					ctx.lineWidth = "4";
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					if (that.positionArr.length > 0) {
						that.positionArr.forEach((item) => {
							ctx.strokeRect(item.start_x, item.start_y, item.width, item.height);
						});
						that.canvasHide = false;
						// that.imgUrl = canvas.toDataURL('image/png');
						// let imgDom = document.querySelector(".img");
						// imgDom.innerHTML = '<img src="'+canvas.toDataURL('image/png')+'" @click="handleOpen">';
					}
				}
			},
			handleOpen() {
				this.picDialog.visible = true;
			}
		}
	}
</script>

<style lang="scss">
	.pic-upload-module {
		position: relative;
		cursor: pointer;
		width: 100%;
		height: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid #EBEEF5;

		.img {
			width: 100%;
			height: 100%;

			& > img {
				max-width: 100%;
				max-height: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}

			.canvas {
				display: block;
				background: rgba(255, 255, 255, 0);
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);

				&.hide {
					opacity: 0;
				}
			}
		}

		#draw-img {
			display: none;
		}

		.upload {
			width: 100%;
			position: absolute;
			bottom: -60px;
			background-color: rgba(0, 0, 0, 0.5);
			opacity: 0;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-ms-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;

			.avatar-uploader .el-upload {
				background-color: #fff;
				border: 1px dashed #d9d9d9;
				border-radius: 3px;
				cursor: pointer;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 60px;
				height: 60px;
				line-height: 60px;
				text-align: center;
			}

			.avatar {
				width: 60px;
				height: 60px;
				display: block;
			}
		}

		&:hover .upload {
			opacity: 1;
			-webkit-transform: translateY(-60px);
			-moz-transform: translateY(-60px);
			-ms-transform: translateY(-60px);
			-o-transform: translateY(-60px);
			transform: translateY(-60px);
		}

		.el-dialog__body {
			img {
				width: 100%;
			}
		}
	}
</style>
